<template>
	<div class="yingmoo-shoppingcart">
		<ym-memberheader></ym-memberheader>
		<div class="yingmoo-memberbanner">
			<div class="nav">
				<div class="yingmoo-logo">
					<router-link tag="div" to="/"><img src="../assets/ym-member/yingmoo-logo.png" /></router-link>
					<p>购物车</p>
				</div>
				<el-steps :active="1" align-center>
					<el-step title="我的购物车"></el-step>
					<el-step title="提交订单"></el-step>
					<el-step title="确认订单"></el-step>
					<el-step title="上传合同"></el-step>
				</el-steps>
			</div>
		</div>
		<div class="indent-list">
			<ul class="indent-head">
				<li>媒体名称</li>
				<li>规格</li>
				<li>投放周期</li>
				<li>排期/执行时间</li>
				<li>执行价格</li>
				<li>操作</li>
			</ul>
			<div v-for='cart in carts'>
				<div style="width: 100%; height: 35px;">
					<span style="height: 35px;line-height: 35px;margin-left: 25px;color:#999999 ">{{cart.companyName}}</span>
				</div>
				<div class="indent-odd">
					<div class="one">
						<div class="one-div">
							<input class="check" name="check" type="checkbox" :value="cart.cartId" @change="getNum"/>
							<label><img width="180px" height="117px" :src="cart.cover" /></label>
						</div>
						<div class="two-div">
							<h1>{{cart.mediaName}}</h1>
							<p>{{cart.category}}</p>
							<p>{{cart.area}}</p>
						</div>
					</div>
					<div class="two">
						<p>{{cart.width}}m * {{cart.height}}m</p>
					</div>
					<div class="three">
						<p>{{cart.minCycle}}</p>
					</div>
					<div class="for">
						<el-date-picker class="data" type="date" v-model="cart.startTime" placeholder="开始时间" style="width: 140px;"></el-date-picker>
						<el-date-picker class="data" type="date" v-model="cart.endTime" placeholder="结束时间" style="width: 140px;" @change="pickDate(cart.cartId,cart.startTime,cart.endTime)"></el-date-picker>
					</div>
					<div class="six">
						<p>{{cart.price}}{{cart.pirceUnit}}</p>
						<!--<p>{{cart.mediaData.discountPrice}}</p>-->
					</div>
					<div class="five">
						<p @click="deleteOne(cart.cartId)">删除</p>
						<p class="color" @click="addAttention(cart.mediaId,cart.cartId)">移至我的收藏</p>
					</div>
				</div>
			</div>
			<div class="indent-foot">
				<ul class="last">
					<li>
						<input type="checkbox" id="over" @change="selectAll();getNum()"/>
						<label for="over">全选</label>
					</li>
					<li @click="deletebatch">删除选中的资料</li>
					<li>移至我的收藏</li>
					<li>
						已选<span>{{selected}}</span>个媒体
					</li>
					<li>
						<!--总价：<span>￥0.00</span>元-->
					</li>
					<li @click="commit">去结算</li>
					<!--<router-link tag="li" to="/ymShoppingcartcommit">去结算</router-link>-->
				</ul>
			</div>
		</div>
		<!--  推荐媒体  -->
		<!--<div class="recommend-media">
			<div class="recommend">
				<h3>推荐媒体</h3>
				<h3>我的足迹</h3>
			</div>
			<div class="recommend-model" v-show="shos=1">
				<div class="model" v-for="lastest in lastest">
					<img src="../assets/ym-member/model-img.png" />
					<h2>{{lastest.name}}</h2>
					<p class="money">{{lastest.price}}</p>
					<p class="place">{{lastest.remark}}<span>{{lastest.look}}</span></p>
				</div>
			</div>
			<div class="recommend-model" v-show="shos=2">
				<div class="model" v-for="lastest in lastest">
					<img src="../assets/ym-member/model-img.png" />
					<h2>{{lastest.name}}</h2>
					<p class="money">{{lastest.price}}</p>
					<p class="place">{{lastest.remark}}<span>{{lastest.look}}</span></p>
				</div>
			</div>
		</div>-->
		<ym-detailsfooter></ym-detailsfooter>
	</div>
</template>
<script>
	import ymMemberheader from "@/components/ymMemberheader.vue";
	import ymDetailsfooter from "@/components/ymDetailsfooter.vue";
	export default {
		name: "yingmoo-media",
		components: {
			ymMemberheader,
			ymDetailsfooter
		},
		data() {
			return {
				requestAddr:this.GLOBAL.addr,
				user: {},
				carts: {},
				orders:[],
				startTime:'',
				endTime:'',
				text: [{
					textheadline: '媒体标题媒体标题媒体标题',
					texttype: '机场媒体',
					textfrom: '灯箱',
					textlocation: '北京',
					textplace: '海淀区',
					textname: '媒体主公司名称',
					textsize: '13m*9m',
					textdeadline: '月',
					texttime: '2017-11-23',
					textoriginal: '￥880000.00',
					textprice: '￥880000.00',
					textstate: '删除',
					textbtn: '移至我的收藏'
				}, {
					textheadline: '媒体标题媒体标题媒体标题',
					texttype: '机场媒体',
					textfrom: '灯箱',
					textlocation: '北京',
					textplace: '海淀区',
					textname: '媒体主公司名称',
					textsize: '13m*9m',
					textdeadline: '月',
					texttime: '2017-11-23',
					textoriginal: '￥880000.00',
					textprice: '￥880000.00',
					textstate: '删除',
					textbtn: '移至我的收藏'
				}, {
					textheadline: '媒体标题媒体标题媒体标题',
					texttype: '机场媒体',
					textfrom: '灯箱',
					textlocation: '北京',
					textplace: '海淀区',
					textname: '媒体主公司名称',
					textsize: '13m*9m',
					textdeadline: '月',
					texttime: '2017-11-23',
					textoriginal: '￥880000.00',
					textprice: '￥880000.00',
					textstate: '删除',
					textbtn: '移至我的收藏'
				}, {
					textheadline: '媒体标题媒体标题媒体标题',
					texttype: '机场媒体',
					textfrom: '灯箱',
					textlocation: '北京',
					textplace: '海淀区',
					textname: '媒体主公司名称',
					textsize: '13m*9m',
					textdeadline: '月',
					texttime: '2017-11-23',
					textoriginal: '￥880000.00',
					textprice: '￥880000.00',
					textstate: '删除',
					textbtn: '移至我的收藏'
				}, {
					textheadline: '媒体标题媒体标题媒体标题',
					texttype: '机场媒体',
					textfrom: '灯箱',
					textlocation: '北京',
					textplace: '海淀区',
					textname: '媒体主公司名称',
					textsize: '13m*9m',
					textdeadline: '月',
					texttime: '2017-11-23',
					textoriginal: '￥880000.00',
					textprice: '￥880000.00',
					textstate: '删除',
					textbtn: '移至我的收藏'
				}],
				lastest: [{
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}, {
					name: '媒体名称媒体名称媒体名称',
					price: '价格：120万 元/年',
					remark: '北京西站',
					look: '看板'
				}],
				selected:0
			}
		},
		mounted() {
			this.getUser();
		},
		methods: {
			getUser: function() {
				var data = localStorage.getItem("user");
				if(data != null) {
					this.user = JSON.parse(localStorage.getItem("user"));
					this.getCartList();
				}
			},
			//获取相关的购物车中的信息
			getCartList: function() {
				this.$http.post(this.requestAddr+"/GetJson/toMyCart", {
					"advertiserId": this.user.autoId
				}, {
					emulateJSON: true
				}).then(
					(res) => {
						this.carts = res.data.cart;
						console.log(this.carts)
					}
				)
			},
			//提交选中数据，生成订单
			commit(){
				var cartsId = this.multSelect();
				if(cartsId.length == 0){
					alert("请先选择商品！")
					return;	
				}
				sessionStorage.setItem("carts",cartsId);
				window.location.href = "../#/ymShoppingcartcommit";
				/*this.$http.post(this.requestAddr+"/GetJson/createOrder",{"cartIds":cartsId,"advertiserId":this.user.autoId},{emulateJSON:true}).then(
					(res)=>{
						if(res.data.code == 0){
							window.location.href = "../#/ymShoppingcartcommit";
						}
					}
				)*/
			},
			pickDate(cartId,startTime,endTime){
				var cart = new Object();
				cart.cartId = cartId;
				if(startTime==''||startTime==null){
					alert("请先选择投放开始时间！")
					return
				}else if(startTime >= endTime){
					alert("投放结束时间不能先于开始时间！")
					return
				}else{
					cart.startTime = this.GMTToStr(startTime);
					cart.endTime = this.GMTToStr(endTime);
					console.log(cart);
					this.$http.post(this.requestAddr+"/GetJson/pickDate",cart,{emulateJSON:true}).then()
				}
				
			},
			//添加关注
	    	addAttention:function(mediaId,cartId){
	    		this.$confirm('确认将该商品移至关注中心吗？', '确认提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning' 
		    	}).then(
		    		()=>{
		    			this.$http.post(this.requestAddr+"/GetJson/addAttention",{"userId":this.user.autoId,"mediaId":mediaId,"type":1},{emulateJSON:true}).then(
		    				(res)=>{
		    					if(res.data.code==0){
		    						this.$http.post(this.requestAddr+"/GetJson/deleteCartMedia",{"cartId":cartId},{emulateJSON:true}).then(
		    							(res)=>{
		    								if(res.data.code == 0){
		    									this.getCartList()
		    								}
		    							}
		    						)
		    					}
		    				}
		    			)
		    		}
		    	)
	    	},
			//获取选中的数据条数
			getNum:function(){
				var selectNum = 0;
				var options = document.getElementsByName("check");
				for (var i=0; i<options.length;i++) {
					if(options[i].checked == true){
						selectNum += 1;
					}
				}
				this.selected = selectNum;
			},
			//全选
			selectAll:function(){
				var selAll = document.getElementById("over");
				var options = document.getElementsByName("check");
				for(var i = 0; i<options.length; i++){
					options[i].checked = selAll.checked;
				}
			},
			//获取被选中的复选框中的值，并返回一个数组
			multSelect:function(){
				var options = document.getElementsByName("check");
				var cartIds = new Array();
				var index = 0;
				if(options.length<=0){
					alert("请先选择相关商品数据！")
					return;
				}
				for (var i = 0; i<options.length;i++) {
					if(options[i].checked == true){
						cartIds[index] = options[i].value;
						index++;
					}
				}
				return cartIds;
			},
			//删除单条数据
			deleteOne:function(cartId){
				this.$confirm('确认删除该商品吗？', '删除提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning' 
				}).then(
					()=>{
						console.log(cartId);
						this.$http.post(this.requestAddr+"/GetJson/AdOrders/deleteMediaFromCart",{"cartId":cartId},{emulateJSON:true}).then(
							(res)=>{
								console.log(res.data);
								this.getCartList();
							}
						)
					}
				)
			},
			//批量删除选中的数据
			deletebatch:function(){
				var cartIds = this.multSelect();
				if(cartIds.length == 0){
					alert("请先选择商品！")
					return;	
				}
				this.$confirm('确认选中的商品吗？', '删除提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning' 
				}).then(
					()=>{
						this.$http.post(this.requestAddr+"/GetJson/AdOrders/deleteMediaFromCartBatch",{"cartIds":JSON.stringify(cartIds)},{emulateJSON:true}).then(
							(res)=>{
								console.log(res.data);
								this.getCartList();
							}
						)
					}
				)
			},
			GMTToStr:function(time){//格林威治时间转换为自定义字符串形式
			    let date = new Date(time)
			    let Str=date.getFullYear() + '-' +(date.getMonth() + 1) + '-' + date.getDate()
			    return Str
			},	
			StrToGMT:function(time){//字符串格式时间转换成格林威治时间
			    let GMT = new Date(time)
			    return GMT
			},
		}
	}
</script>
<style>
	.el-input__inner{
		width: 140px;
	}
	.el-steps {
		width: 380px;
		height: 20px;
		align-items: center;
	}
	
	.el-step__icon {
		width: 22px;
		height: 22px;
	}
	
	.el-step__title {
		font-size: 12px;
		line-height: 25px;
	}
	
	.el-step__title.is-process {
		color: #c0c4cc;
	}
	
	.el-step__icon.is-text {
		color: white;
		background-color: #1b8cd9;
	}
	
	.el-step__head.is-process {
		border-color: #1b8cd9;
	}
	
	.el-step__head.is-wait {
		border-color: #1b8cd9;
	}
	
	.el-step__head.is-finish {
		border-color: #f29600;
	}
	
	.el-step__title.is-finish {
		color: #f29600;
	}
</style>
<style scoped lang="less">
	.data{
		width: 140px;
		height: 30px;
	}
	.el-input__inner{
		width: 145px;
	}
	.yingmoo-shoppingcart {
		background-color: #f3f9ff;
		.yingmoo-memberbanner {
			width: 100%;
			height: 62px;
			background-color: #036eb7;
			.nav {
				width: 1200px;
				height: 62px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.yingmoo-logo {
					width: 252px;
					height: 43px;
					display: flex;
					justify-content: space-between;
					p {
						color: #6998d4;
						font-size: 14px;
						line-height: 43px;
					}
				}
			}
		}
		.indent-list {
			width: 1200px;
			margin: 0 auto;
			background-color: white;
			margin-top: 25px;
			.indent-head {
				width: 1200px;
				height: 42px;
				font-size: 16px;
				display: flex;
				background-color: #f2f2f2;
				li {
					text-align: center;
					line-height: 42px;
					color: #666666;
					&:nth-child(1) {
						width: 474px;
					}
					&:nth-child(2) {
						width: 171px;
					}
					&:nth-child(3) {
						width: 111px;
					}
					&:nth-child(4) {
						width: 150px;
					}
					&:nth-child(5) {
						width: 186px;
					}
					&:nth-child(6) {
						width: 162px;
					}
				}
			}
			.indent-odd {
				display: flex;
				height: 142px;
				border-bottom: 1px solid #f2f2f2;
				border-top: 2px solid #1578bc;
				.one {
					
					width: 474px;
					display: flex;
					align-items: center;
					background-image: url(../assets/ym-member/cut-off-rule.png);
					background-repeat: no-repeat;
					background-position: right;
					.one-div {
						display: flex;
						align-items: center;
						input {
							margin-left: 25px;
						}
						label {
							margin-left: 10px;
						}
					}
					.two-div {
						width: 185px;
						font-size: 14px;
						line-height: 32px;
						padding-left: 30px;
						h1 {
							font-weight: bold;
							margin-top: 10px;
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
						}
						p {
							color: #999999;
						}
					}
				}
				.two {
					width: 171px;
					line-height: 142px;
					background-image: url(../assets/ym-member/cut-off-rule.png);
					background-repeat: no-repeat;
					background-position: right;
					p {
						color: #999999;
						font-size: 14px;
						text-align: center;
					}
				}
				.three {
					width: 111px;
					background-image: url(../assets/ym-member/cut-off-rule.png);
					background-repeat: no-repeat;
					background-position: right;
					p {
						width: 100%;
						font-size: 14px;
						color: #999999;
						text-align: center;
						line-height: 142px;
					}
				}
				.for {
					width: 150px;
					color: #999999;
					font-size: 14px;
					text-align: center;
					background-image: url(../assets/ym-member/cut-off-rule.png);
					background-repeat: no-repeat;
					background-position: right;
					line-height: 65px;
					.btn {
						width: 123px;
						height: 28px;
						line-height: 28px;
						border: 1px solid #dddddd;
						margin: 0 auto;
						border-radius: 3px;
						&:nth-child(1) {
							margin-top: 25px;
						}
					}
					p {
						line-height: 30px;
					}
				}
				.five {
					width: 186px;
					text-align: center;
					color: #999999;
					font-size: 14px;
					cursor: pointer;
					p {
						text-align: center;
						&:nth-child(1) {
							color: #999999;
							margin-top: 33px;
							line-height: 50px;
						}
						&:nth-child(2) {
							color: #f39e26;
							font-weight: bold;
						}
					}
				}
				.six {
					width: 162px;
					background-image: url(../assets/ym-member/cut-off-rule.png);
					background-repeat: no-repeat;
					background-position: right;
					p {
						text-align: center;
						&:nth-child(1) {
							text-decoration: line-through;
							color: #999999;
							margin-top: 33px;
							line-height: 50px;
						}
						&:nth-child(2) {
							color: #f39e26;
							font-weight: bold;
						}
					}
				}
			}
			.indent-foot {
				width: 1200px;
				height: 46px;
				.last {
					width: 1200px;
					height: 46px;
					background-color: #f2f2f2;
					line-height: 46px;
					margin: 0 auto;
					margin-top: 18px;
					li {
						font-size: 14px;
						color: #666666;
						margin-left: 30px;
						cursor: pointer;
            float: left;
						&:nth-child(1) {
							margin-left: 15px;
							padding-left: 0;
						}
						&:nth-child(2) {
							&:hover {
								color: #f29600;
							}
						}
						&:nth-child(3) {
							&:hover {
								color: #f29600;
							}
						}
						&:nth-child(4) {
							margin-left: 474px;
							span {
								color: #f29600;
								font-weight: bold;
								font-size: 18px;
							}
						}
						&:nth-child(5) {
							span {
								color: #f29600;
								font-weight: bold;
								font-size: 18px;
							}
						}
						&:nth-child(6) {
							width: 130px;
							height: 46px;
							background-color: #f29600;
							color: white;
							font-weight: bold;
							font-size: 18px;
							text-align: center;
							margin-left: 60px;
              float: right;
							&:hover {
								color: #8e5800;
							}
						}
					}
				}
			}
		}
		.recommend-media {
			width: 1200px;
			height: 555px;
			overflow: hidden;
			margin: 0 auto;
			margin-top: 20px;
			.recommend {
				font-size: 14px;
				color: #666666;
				border-bottom: 2px solid #1478bc;
				line-height: 26px;
				font-weight: bold;
				display: flex;
				h3 {
					&:nth-child(1) {
						color: #1478bc;
					}
					&:nth-child(2) {
						margin-left: 20px;
					}
				}
			}
			.recommend-model {
				width: 1200px;
				height: 540px;
				.model {
					width: 224px;
					height: 235px;
					background-color: white;
					margin-top: 20px;
					margin-left: 20px;
					float: left;
					&:nth-child(1) {
						margin-left: 0;
					}
					&:nth-child(6) {
						margin-left: 0;
					}
					h2 {
						font-size: 16px;
						color: #333333;
						padding-left: 15px;
						line-height: 25px;
						padding-top: 5px;
					}
					p {
						font-size: 14px;
						padding-left: 15px;
						line-height: 25px;
					}
					.money {
						color: #f29600;
					}
					.place {
						color: #999999;
						span {
							padding-left: 12px;
						}
					}
				}
			}
		}
	}
</style>